<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Captive</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-animate-colors-min.js"></script>



<script>

	

	function startGame()
	{
		document.getElementById("start").style.display="none";
		document.getElementById("background").style.display="inherit";
		setTimeout(phone, 1000);
		function phone() {
			document.getElementById('audiotag1').play();
			setTimeout(pickup, 4000);
		}
		
		function pickup() {
			document.getElementById('audiotag1').pause();
			document.getElementById("dialog").style.display="inherit";
			document.getElementById("dialog").innerHTML = "I say: <br/>Hello, can I help you?";
			$("#dialog").click(dialog2);
		}
		
	}
	
	function dialog2()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "Stranger says: <br/>I have your son. Don't call the police, or else you will never see him again...";
		document.getElementById("peopleimage").src="images/stephen.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(dialog3);
		}
		
	}
	
	function dialog3()
	{
		$("#dialog").unbind('click');
		document.getElementById("dialog").innerHTML = "I say: <br/>Can I please talk to my son?";
		document.getElementById("peopleimage").src="images/blank.png";
		setTimeout(bind_click, 1000);
		function bind_click(){
			$("#dialog").click(endscene);
		}
	}
	
	function nextscene()
	{
		window.location = "scene1.php";
	}
	
	function endscene()
	{
		document.getElementById("dialog").style.display="none";
		document.getElementById("background").style.display="none";
		document.getElementById("title").style.display="inherit";
		document.getElementById('audiotag2').play();
		$("#container").animate({ backgroundColor: "#FFFFFF" }, 7000);
		setTimeout(nextscene, 9000);
	}
	

</script>



</head>

<body>


<div id="container">
	<div id="background"><img src="images/office.jpg" /></div>
	<div id="start"><img onclick="startGame()" src="images/start-icon.png" /></div>
	<div id="dialog">
	</div>
	<div id="people"><img id="peopleimage" src=""></div>
	<div id="title"><img src="images/title.png" /></div>
</div>


<audio id="audiotag1" src="audios/phone_ringing.mp3" preload="auto"></audio>
<audio id="audiotag2" src="audios/intro2.mp3" preload="auto"></audio>



</body>
</html>